<template>
  <section class="app-help-type">
    <section class="app-main">

      <div class="module-title">
        帮助文档类型
      </div>
      <dl class="module-body">
        <dd class="item" v-for="(item,index) in typeList">
          <mt-cell class="item-first" :title="item.title" is-link @click.native="handleShowSecond(index)"></mt-cell>
          <div class="item-second-content" :class="{active:currentIndex==index}">
            <mt-cell class="item-second" v-for="(itemSecond,indexSecond) in item.second" :title="(indexSecond+1)+'，'+itemSecond.title" is-link @click.native="handleList(itemSecond)">

            </mt-cell>
          </div>
        </dd>
      </dl>
    </section>
  </section>
</template>

<script>
  import { Header,Cell,Toast,MessageBox} from 'mint-ui';
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      currentIndex:-1,
      typeList:[{
        title:'客服帮助',
        id:1,
        second:[
          {
            title:'新人入职',
            id:2,
          },{
            title:'派工',
            id:3,
          },{
            title:'其它',
            id:4,
          },
        ]
      },{
        title:'玻璃安装帮助',
        id:5,
        second:[
          {
            title:'安装前',
            id:6,
          },{
            title:'安装后',
            id:7,
          }
        ]
      }]
    }
  },
  mounted(){
  },
  methods:{
    handleShowSecond(index){
      this.currentIndex=index
    },
    handleList(item){
      this.$router.push({path:'/help-list',query:{id:item.id}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-help-type .module-title{
    padding:16px 12px 12px;
    font-size: 15px;
  }
  .app-help-type .module-title:before{
    background:#007EE5;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:3px;
    height:12px;
    content: '';
    margin-right:4px;
  }
  .app-help-type .module-body{
    margin: 0;
  }
  .app-help-type .module-body .item{
    margin: 0;
  }
  .app-help-type .module-body .item-second-content{
    background: #fff;
    padding-left: 20px;
    display: none;
  }
  .app-help-type .module-body .item-second-content.active{
    display: block;
  }
</style>
